<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BoringTodo - 任务管理</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>BoringTodo - 任务管理</h1>
        </header>
        
        <main>
            <div class="left-panel">
                <div class="panel task-actions">
                    <h3>任务操作</h3>
                    <button id="btnAddTask" class="btn"><i class="bi bi-plus-circle"></i> 新增任务</button>
                    <button id="btnDeleteTask" class="btn"><i class="bi bi-trash"></i> 删除任务</button>
                    <button id="btnMarkAsComplete" class="btn"><i class="bi bi-check-circle"></i> 完成任务</button>
                    <button id="btnEditTask" class="btn"><i class="bi bi-pencil"></i> 编辑任务</button>
                    <button id="btnMoveToTop" class="btn"><i class="bi bi-arrow-up-circle"></i> 置顶</button>
                </div>
                
                <div class="panel ai-actions">
                    <h3>AI 功能</h3>
                    <button id="btnOpenChat" class="btn"><i class="bi bi-chat-dots"></i> Deepseek</button>
                    <button id="btnCopyWeeklyCompletedTasks" class="btn"><i class="bi bi-file-text"></i> 让AI写周报</button>
                    <button id="btnCopyMonthlyCompletedTasks" class="btn"><i class="bi bi-calendar-check"></i> 让AI写月报</button>
                </div>
                
                <div class="panel system-actions">
                    <h3>系统功能</h3>
                    <button id="btnScreenshot" class="btn"><i class="bi bi-camera"></i> 截图</button>
                    <button id="btnSettings" class="btn"><i class="bi bi-gear"></i> 设置</button>
                    <button id="btnSendEmail" class="btn"><i class="bi bi-envelope"></i> 发送邮件</button>
                </div>
            </div>
            
            <div class="right-panel">
                <div class="tasks-container">
                    <h2 class="section-title">待办任务</h2>
                    <div class="task-table-container">
                        <table id="todoTable" class="task-table">
                            <thead>
                                <tr>
                                    <th>任务描述</th>
                                    <th>预期完成时间</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 任务数据将通过JS动态填充 -->
                            </tbody>
                        </table>
                    </div>
                    
                    <h2 class="section-title">已完成任务</h2>
                    <div class="task-table-container">
                        <table id="completedTable" class="task-table">
                            <thead>
                                <tr>
                                    <th>任务描述</th>
                                    <th>完成时间</th>
                                    <th>备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <!-- 已完成任务数据将通过JS动态填充 -->
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </main>
    </div>
    
    <!-- 模态框 - 编辑任务 -->
    <div id="editTaskModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>编辑任务</h2>
            <form id="editTaskForm">
                <div class="form-group">
                    <label for="taskDescription">任务描述:</label>
                    <input type="text" id="taskDescription" required>
                </div>
                <div class="form-group">
                    <label for="taskDate">预期完成时间:</label>
                    <input type="datetime-local" id="taskDate">
                </div>
                <div class="form-group">
                    <label for="taskNotes">备注:</label>
                    <textarea id="taskNotes" rows="4"></textarea>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" id="btnCancelEdit">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 模态框 - 设置 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>设置</h2>
            <form id="settingsForm">
                <div class="form-group">
                    <label for="enableAutoScreenshot">自动截图:</label>
                    <input type="checkbox" id="enableAutoScreenshot">
                </div>
                <div class="form-group">
                    <label for="screenshotInterval">截图间隔 (分钟):</label>
                    <input type="number" id="screenshotInterval" min="1" value="60">
                </div>
                <div class="form-group">
                    <label for="reportPrompt">AI报告提示语:</label>
                    <textarea id="reportPrompt" rows="4">请根据以下完成的任务，总结一下我的工作内容，用第一人称：</textarea>
                </div>
                <div class="form-group data-location-info">
                    <label>数据存储位置:</label>
                    <div class="data-location-box">
                        <p class="data-location-text">浏览器 LocalStorage</p>
                        <div class="data-location-actions">
                            <button type="button" id="btnOpenDataFolder" class="btn btn-info">
                                <i class="bi bi-folder"></i> 数据存储信息
                            </button>
                            <button type="button" id="btnExportAllData" class="btn btn-info">
                                <i class="bi bi-download"></i> 导出所有数据
                            </button>
                        </div>
                    </div>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">保存</button>
                    <button type="button" class="btn btn-secondary" id="btnCancelSettings">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 模态框 - 邮件设置 -->
    <div id="emailModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <h2>发送邮件</h2>
            <form id="emailForm">
                <div class="form-group">
                    <label for="smtpServer">SMTP服务器:</label>
                    <input type="text" id="smtpServer" required>
                </div>
                <div class="form-group">
                    <label for="smtpPort">SMTP端口:</label>
                    <input type="number" id="smtpPort" value="587" required>
                </div>
                <div class="form-group">
                    <label for="emailAddress">发件人邮箱:</label>
                    <input type="email" id="emailAddress" required>
                </div>
                <div class="form-group">
                    <label for="emailPassword">邮箱密码:</label>
                    <input type="password" id="emailPassword" required>
                </div>
                <div class="form-group">
                    <label for="enableSsl">启用SSL:</label>
                    <input type="checkbox" id="enableSsl" checked>
                </div>
                <div class="form-group">
                    <label for="recipientEmail">收件人邮箱:</label>
                    <input type="email" id="recipientEmail" required>
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">发送</button>
                    <button type="button" class="btn btn-secondary" id="btnCancelEmail">取消</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 上下文菜单 -->
    <div id="contextMenu" class="context-menu">
        <ul>
            <li id="contextEdit"><i class="bi bi-pencil"></i> 编辑任务</li>
            <li id="contextDelete"><i class="bi bi-trash"></i> 删除任务</li>
            <li id="contextComplete"><i class="bi bi-check-circle"></i> 标记为完成</li>
            <li id="contextTop"><i class="bi bi-arrow-up-circle"></i> 置顶任务</li>
            <li class="divider"></li>
            <li id="contextCopy"><i class="bi bi-clipboard"></i> 复制任务描述</li>
        </ul>
    </div>
    
    <script src="js/todo-data.js"></script>
    <script src="js/app.js"></script>
</body>
</html> 